<template>
  <div id="login" class="login">
    <div class="login-head">
      <img src="/static/img/login/logoGreen.png" alt="" class="login-title">
      <div class="line"></div>
      <div class="login-intro">
        <p>中国电梯质量安全服务平台</p>
        <span>CEQS elevator quality and safety service platform in China</span>
      </div>
    </div>
    <div class="login-content">
      <div class="login-info">
        <div class="login-intro">
          <img src="/static/img/login/sym.png" alt="">
        </div>
        <div class="login-box">
          <p class="user-login">用户登录</p>
          <div class="login-form">
            <div class="msg-box">
              <div class="icon-box">
                <div class="icon"><img src="/static/img/login/user.png" alt=""></div>
                <input autocomplete="off" type="text" v-model="userNanme" v-on:keyup.enter="loginCheck"
                       placeholder="用户名 / 手机号">
              </div>
            </div>
            <div class="msg-box">
              <div class="icon-box">
                <div class="icon"><img src="/static/img/login/pwd.png" alt=""></div>
                <input autocomplete="off" type="password" v-model="password" v-on:keyup.enter="loginCheck"
                       placeholder="密码">
              </div>
              <div class="login-msg" v-show="warnVisible"><img src="/static/img/login/error.png" alt="">{{msg}}</div>
            </div>
            <p class="login-btn" :class=" flag ? 'login':'nologin'" @click="loginCheck">登录</p>
          </div>
        </div>
      </div>

    </div>
    <div class="login-foot">
      <p class="copy-right">浙ICP备18024782号 杭州中隆物联网有限公司</p>
    </div>
  </div>
</template>

<script>
  import com from '../js/common'
  import md5 from 'js-md5'
  import {login} from '../api/getData'

  export default {
    name: "login",
    data() {
      return {
        userNanme: '',
        password: '',
        warnVisible: false,
        flag: false,
        msg: '请输入用户名',
      }
    },
    created() {

    },
    mounted() {
    },
    methods: {
      // 登陆前表单数据校验
      loginCheck() {
        this.flag = true;
        if (this.userNanme === '') {
          this.flag = false;
          this.warnVisible = true;
          this.msg = '用户名称不能为空';
        } else if (this.password === '') {
          this.flag = false;
          this.warnVisible = true;
          this.msg = '用户密码不能为空';
        }
        if (this.flag) {
          let param = {};
          param.username = this.userNanme;
          param.password = md5(this.password);
          param.clientType = 'WEB';
          this.login(param);
        }
      },
      // 登录
      login(param) {
        // 登录请求
        login(param).then((data) => {
        	const curData = data.data.data
        	const userData = curData.user;
        	if (curData.menuList.length) com.setStore('menuList', JSON.stringify(curData.menuList))
        	const loginTime = Date.parse(new Date())
        	const obj = {
        		'loginToken': curData.token,
        		'userId': userData.userId,
        		'departmentId': userData.departmentId,
        		'departmentType': curData.departmentType, // 99 运维 1 维保 2 物业 3 巡检
        		'menuList': JSON.stringify(curData.menuList),
        		'menuSelect': 0 + ',' + 0,
        		'lastLoginTime': userData.lastLoginTime,
        		'companyName': userData.companyName,
        		'role': userData.role,
        		'loginTime': loginTime,
        		'username': userData.username
        	}
        	for(let i in obj) {
							com.setStore(i, obj[i])
        	}

          if (curData.menuList.length) {
            let menu = curData.menuList
            for (let i = 0; i < menu.length; ++i) {
              if (menu[i].page) {
                location.href = `..${menu[i].page}` // 跳转到这位用户的首页
                break
              }
            }
          } else {
            location.href = `../manage`
          }
        }).catch((data) => {
          console.log(data)
          if (data.data) {

            this.msg = data.data.message
            this.warnVisible = true
            this.flag = false

          } else {
            this.msg = '服务器异常'
            this.warnVisible = true
            this.flag = false
          }
        })
      },
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import "../style/entry/login.scss";
</style>
